import React,{Component} from 'react'
import {Form,Input,Button,Select} from 'antd'
import {inject, observer} from 'mobx-react'
const {Option} = Select
const {Item} = Form

/**
 * 名称：活动搜索
 * 描述：活动搜索
 * 调用：pages/creating-activity 创建活动
 * 输入： 
 * 时间：20220401
 */
 @inject('activityStore')
 @observer
class ActivitySearchForm extends Component{
    /**
     * 提交按钮
     * 描述：提交后进行搜索
     * @param {*} e 
     */
    handleSubmit = e=> {
        e.preventDefault()
        const form  = this.props.form
        const {activityStore} = this.props
        form.validateFields(async (err, values) => {
            if(!err){
                console.log("Received:",values)
                let status = values['status']
                let joinNum = values['joinNum']
                let activityName = values['activityName']
                activityStore.apiActivityAllFilter(status,joinNum,activityName)
            } else {
                // alert("用户名或密码输入错误")
            }
        }
        )

    }

    render (){
        
        const {getFieldDecorator} = this.props.form
        return (
            <Form onSubmit={this.handleSubmit} className="form" layout="inline" >
                    <Item  name="status" label="状态">
                    {
                        getFieldDecorator('status',{})(
                        <Select style={{ width: 80, margin: '0 8px' }}  >
                            <Option value="">全部</Option>   
                            <Option value="on">已上架</Option>
                            <Option value="off">待上架</Option>
                        </Select>
                        )
                    }
                    </Item>
                    <Item name="joinNum" label="参与人数">
                        {
                        getFieldDecorator('joinNum',{
                            initialValue:"",
                            rules:[
                                // {required: true, whitespace: true, message: "请输入参与人群人数"},
                                {max: 12, message: "字段信息不能多于12个字符"},
                            ]
                        })(
                            <Input/>
                        )
                        }
                    </Item>
                    <Item  name="activityName" label="活动名称">
                    
                         {
                        getFieldDecorator('activityName',{
                            initialValue:"",
                            rules:[
                                
                                // {required: true, whitespace: true, message: "请输入活动名称"},
                                {max: 200, message: "字段长度信息不能多于200个字符"},
                            ]
                        })(
                            <Input/>
                        )
                        }

                    </Item>
                    <Item style={{float:"right"}}>
                        <Button type="primary" htmlType="submit"  className="form-submit" onClick={this.handleSubmit}>
                            查询
                        </Button>
                    </Item>
                </Form>
           )
    }
}

const WrapperForm = Form.create()(ActivitySearchForm)
export default WrapperForm